import React, {FC, useCallback, useContext, useRef} from 'react';
import "./HxJournalCoverItem.less";
import default_art_cover from "@/assets/default_art_cover.png";
import {Link} from "umi";
import * as API from "@/services";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {Tooltip, Image} from "antd";
import {correspVal} from "@/utils/biz";
import {history} from "@@/core/history";
import {useLongPress} from "ahooks";

interface HxJournalCoverItemProps {
  journal: API.FrontJournal
}

const HxJournalCoverItem: FC<HxJournalCoverItemProps> = (props) => {
  const {journal} = props;
  const {isZhCN} = useContext(HxConfigContext)

  const jump = useCallback(() => {
    history.push({
      pathname: `/journal/${journal?.id}`,
    })
  }, [journal]);

  const containerRef = useRef<HTMLDivElement>(null);

  //因为是HxScrollMenu的子元素, HxScrollMenu内容区长按后可以左右拖拽移动
  //所以这里要特殊处理下
  useLongPress(() => {}, containerRef, {
    delay: 100,
    moveThreshold: {x: 10, y: 10},
    onLongPressEnd: () => {
      jump()
    }
  });

  return (
    <div className={"hx-journal-cover-item-container"} ref={containerRef}>
      <Tooltip
        title={correspVal(isZhCN, journal?.journalNameCn, journal?.journalNameEn)}
        styles={{
          root: {
            maxWidth: 500
          }
        }}
      >
        <Image src={journal?.journalCoverPathUrl} fallback={default_art_cover} preview={false}/>
      </Tooltip>
    </div>
  );
};

export default HxJournalCoverItem;
